<template>
  <div id="gauge" class="mymap" v-on-echart-resize></div>
</template>

<script>
import '@/chart.resize'
export default {
  data() {
    return {
    }
  },
  props: {
  },
  methods: {
    gauge() {
      // 仪表图
      const option = {
        series: [
          {
            name: '销售进度',
            type: 'pie',
            radius: ['130%', '150%'],
            // 移动下位置  套住50%文字
            center: ['48%', '80%'],
            // 是否启用防止标签重叠策略
            // avoidLabelOverlap: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            // 饼形图的起始角度为 180， 注意不是旋转角度
            startAngle: 180,
            // 鼠标经过不需要放大偏移图形
            hoverOffset: 0,
            data: [
              {
                value: 100,
                itemStyle: {
                  // 颜色渐变#00c9e0->#005fc1
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#00c9e0' // 0 处的颜色
                    }, {
                      offset: 1, color: '#005fc1' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              },
              {
                value: 100,
                itemStyle: {
                  color: '#12274d'
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: 'transparent'
                }
              }
            ]
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('gauge'))
      myChart.setOption(option)
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.gauge()
    })
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
</style>
